<template>
  <el-container>

    <el-header>模板名称</el-header>
    <el-container>
      <el-aside width="50%" style="border-right: 2px solid #DCDFE6;">
        <el-form ref="form" :model="form" label-width="150px">
          <div class="launcherBase" style="margin-right: 10px">
            <el-form-item label="屏幕分辨率(宽*高):">
              <el-row>
                <el-col :span="6">
                  <el-input placeholder="宽度" v-model="form.screen.width" type="number" style="width: 140px;"></el-input>
                </el-col>
                <el-col class="line" :span="2" style="text-align: center">X</el-col>
                <el-col :span="16">
                  <el-input placeholder="高度" v-model="form.screen.height" type="number"
                            style="width: 140px;"></el-input>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="首屏背景图:">
              <el-col :span="12">
                <el-upload
                  class="avatar-uploader"
                  action
                  :auto-upload="false"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                  :on-change="(file, fileList) => {screenBackgroundUpload(file, fileList, 'first')}"
                >
                  <img :src="bindIcon('screenBck.png')" class="avatar">
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过0.35Mb</div>
                </el-upload>
              </el-col>
            </el-form-item>
            <el-form-item label="二屏背景图:">
              <el-col :span="12">
                <el-upload
                  class="avatar-uploader"
                  action
                  :auto-upload="false"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                  :on-change="(file, fileList) => {screenBackgroundUpload(file, fileList, 'second')}">
                  <img :src="bindIcon('screenBck.png')" class="avatar">
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过0.35Mb</div>
                </el-upload>
              </el-col>
            </el-form-item>

            <el-form-item label="锁屏背景图:">
              <el-col :span="12">
                <el-upload
                  class="avatar-uploader"
                  action
                  :auto-upload="false"
                  :show-file-list="false"
                  :before-upload="beforeAvatarUpload"
                  :on-change="(file, fileList) => {screenBackgroundUpload(file, fileList, 'third')}"
                >
                  <img v-if="form.screen.lockScreenImg" :src="form.screenlockScreenImg" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-col>
            </el-form-item>
          </div>
          <el-divider></el-divider>

          <div class="organBase" style=" margin-right: 10px">
            <h4 style="margin-left: 10px">机构名称(launcher账号中心)</h4>
            <el-row>
              <el-col :span="8">
                <el-form-item label="默认名称:">
                  <el-input placeholder="请输入名称" v-model="form.organ.name" style="width: 100%;"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="默认图标:">
                  <el-upload
                    class="avatar-uploader"
                    action
                    :auto-upload="false"
                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload"
                    :on-change="(file, fileList) => {screenBackgroundUpload(file, fileList, 'first')}"
                  >
                    <img :src="bindIcon('screenBck.png')" class="avatar"
                         style="height: 50px;width: 50px;display: block;border-style: none">
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="字体:">
                  <el-input v-model="form.organ.font" style="width: 100%;"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="字体大小:">
                  <el-input v-model="form.organ.fontSize" style="width: 100%;"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="字体颜色:">
                  <el-color-picker v-model="form.organ.fontColor"></el-color-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="指向关系:">
                  <el-input style="width: 100%;"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="位置设定:">
                  <el-button @click="showPreview('organ')">点击设置</el-button>
                  <!--                  <el-input style="width: 100%;"></el-input>-->
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <el-divider></el-divider>

          <div class="schoolBase" style="margin-right: 10px">
            <h4 style="margin-left: 10px">学校板块设置</h4>
            <el-row>
              <el-col :span="8">
                <el-form-item label="字体:">
                  <el-input v-model="form.school.font" style="width: 100%;"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="字体大小:">
                  <el-input v-model="form.school.fontSize" style="width: 100%;"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="字体颜色:">
                  <el-color-picker v-model="form.school.fontColor"></el-color-picker>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="背景色:">
                  <el-color-picker v-model="form.school.backColor"></el-color-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="指向关系:">
                  <el-input style="width: 100%;"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="位置设定:">
                  <el-button @click="showPreview('school')">点击设置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <el-divider></el-divider>

          <div class="messageBase" style="margin-right: 10px">
            <h4 style="margin-left: 10px">消息通知栏设置</h4>
            <el-row>
              <el-col :span="8">
                <el-form-item label="通知栏字体:">
                  <el-input v-model="form.message.font" style="width: 100%;"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="通知栏字体大小:">
                  <el-input v-model="form.message.fontSize" style="width: 100%;"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="通知栏字体颜色:">
                  <el-color-picker v-model="form.message.fontColor"></el-color-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="通知栏背景色:">
                  <el-color-picker v-model="form.message.backColor"></el-color-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="设定位置:">
                  <el-button @click="showPreview('message')">点击设置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">保存</el-button>
            </el-form-item>
          </div>
        </el-form>

      </el-aside>
      <el-main>
        <el-form ref="form" :model="form" label-width="150px">
          <div class="navigationBase">
            <h4 style="margin-left: 10px;">导航条设置</h4>
            <el-form-item label="导航条样式">
              <el-radio-group v-model="form.navigation.type">
                <el-radio label="1">指示器</el-radio>
                <el-radio label="2">Tab导航</el-radio>
                <el-radio label="3">快捷应用图标</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="未选中背景图:">
              <el-upload
                class="background-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img src="@/assets/images/noChooseTab.png" class="backgroudAvatr">
              </el-upload>

            </el-form-item>
            <el-form-item label="选中背景图:">
              <el-upload
                class="background-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img src="@/assets/images/noChooseTab.png" class="backgroudAvatr">
              </el-upload>
            </el-form-item>

            <el-form-item v-if="form.navigation.type==2" label="未选中Table颜色">
              <el-color-picker v-model="form.navigation.noChooseTabColor" show-alpha></el-color-picker>
            </el-form-item>
            <el-form-item v-if="form.navigation.type==2" label="选中Table颜色">
              <el-color-picker v-model="form.navigation.chooseTabColor" show-alpha></el-color-picker>
            </el-form-item>
            <el-form-item v-if="form.navigation.type==2" label="Tab字体大小:">
              <el-input v-model="form.navigation.fontSize" style="width: 100px;"></el-input>
            </el-form-item>
            <!--            以下为选择快捷应用-->
            <el-form-item v-if="form.navigation.type==3" label="快捷应用图标(宽*高):">
              <el-col :span="5">
                <el-input v-model="form.navigation.fastImgWidth" type="number" style="width: 100px;"></el-input>
              </el-col>
              <el-col class="line" :span="2">X</el-col>
              <el-col :span="11">
                <el-input v-model="form.navigation.fastImgHeight" type="number" style="width: 100px;"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item v-if="form.navigation.type==3" label="快捷应用数">
              <el-input v-model="form.navigation.fastNum" type="number" style="width: 120px;"></el-input>
            </el-form-item>
            <el-form-item v-if="form.navigation.type==3" label="快捷应用选择">
              <el-input style="width: 120px;"></el-input>
            </el-form-item>
            <el-form-item label="导航条大小及位置">
              <el-button @click="showPreview('navigation')">点击设置</el-button>
            </el-form-item>
          </div>
          <el-divider></el-divider>
          <!--        次级页面返回按钮设置-->
          <div class="retButtonBase">
            <h4 style="margin-left: 10px">次级页面返回按钮</h4>
            <el-form-item label="图标上传:">
              <el-col :span="12">
                <el-upload
                  class="avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-col>
            </el-form-item>
            <el-form-item label="位置设定:">
              <el-button @click="showPreview('retButton')">点击设置</el-button>
            </el-form-item>
          </div>
          <el-divider></el-divider>

          <!--          一下为护眼-->
          <div class="backgroundBase">
            <h4 style="margin-left: 10px">护眼设置</h4>
            <el-row>
              <el-col :span="8">
                <el-form-item label="蓝光">
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="护眼">
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="阅读">
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="选中背景图:">
                  <el-upload
                    class="background-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img src="@/assets/images/blue.jpg" class="backgroudAvatr">
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="选中背景图:">
                  <el-upload
                    class="background-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img src="@/assets/images/blue.jpg" class="backgroudAvatr">
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="选中背景图:">
                  <el-upload
                    class="background-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img src="@/assets/images/blue.jpg" class="backgroudAvatr">
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="未选中背景图:">
                  <el-upload
                    class="background-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img src="@/assets/images/blue.jpg" class="backgroudAvatr">
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="未选中背景图:">
                  <el-upload
                    class="background-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img src="@/assets/images/blue.jpg" class="backgroudAvatr">
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="未选中背景图:">
                  <el-upload
                    class="background-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img src="@/assets/images/blue.jpg" class="backgroudAvatr">
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="位置设定:">
                  <el-button @click="showPreview('background')">点击设置</el-button>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="位置设定:">
                  <el-button @click="showPreview('background')">点击设置</el-button>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="位置设定:">
                  <el-button @click="showPreview('background')">点击设置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">保存</el-button>
            </el-form-item>
          </div>
        </el-form>


        <el-button type="primary" class="previewButton" @click="showPreview">点击预览</el-button>
      </el-main>
      <!--    预览组件-->
      <el-drawer
        class="previewDrawer"
        :visible.sync="openPreview"
        :direction="direction"
        :show-close="false"
        size="80%"
        :append-to-body="true"
        @open="drawerHandle"
        ref="drawerExam"
      >
        <canvas id="myCanvas" ref="myCanvas" @mousedown="mousedown" @mouseup="mouseup" @mousemove="mousemove"></canvas>

      </el-drawer>
    </el-container>
  </el-container>
</template>

<script>
  import { uploadScreenBackground } from '@/api/allocation'
  import $ from 'jquery'

  export default {
    name: 'index',
    data() {
      return {
        form: {
          //屏幕
          screen: {
            firstScreenImg: '',   //首屏背景图
            secondScreenImg: '',  //二屏背景图
            lockScreenImg: '',     //锁屏背景图
            previewFirImg: '',    //首屏预览图
            previewSecImg: '',    //二屏幕预览图
            width: 1920,
            height: 1920
          },
          //机构
          organ: {
            name: '',
            img: '',
            font: '',
            fontSize: 18,
            fontColor: '',
            width: 0,
            height: 0,
            x: 0,
            y: 0
          },
          //学校
          school: {
            name: '学校',
            img: '',
            font: '',
            fontSize: 18,
            fontColor: '',
            backColor: '',
            width: 0,
            height: 0,
            x: 0,
            y: 0
          },
          //消息通知栏
          message: {
            name: '消息通知栏',
            img: '',
            font: '',
            fontSize: 18,
            fontColor: '',
            backColor: '',
            width: 0,
            height: 0,
            x: 0,
            y: 0
          },
          //导航栏
          navigation: {
            type: '1',   //1:指示器 2:Tab导航 3:快捷应用图标
            width: 0,
            height: 0,
            x: 0,
            y: 0,
            name: '导航栏设置',
            noChooseImg: '',
            chooseImg: '',
            noChooseTabColor: '',
            chooseTabColor: '',
            fontSize: 18,
            fontColor: '',
            fastImgWidth: 0,
            fastImgHeight: 0,
            fastNum: 0,
            fastAppArr: []   //选择的快捷应用
          },
          //次级页面返回按钮
          retButton: {
            width: 0,
            height: 0,
            x: 0,
            y: 0,
            img: '',
            name: '次级返回按钮'
          },
          background: {
            //蓝光
            blueNoChooseImg: '',
            blueChooseImg: '',
            blueX: 0,
            blueY: 0,
            blueWidth: 0,
            blueHeight: 0,
            //阅读
            readNoChooseImg: '',
            readChooseImg: '',
            readX: 0,
            readY: 0,
            readWidth: 0,
            readHeight: 0,
            //护眼
            eysNoChooseImg: '',
            eysChooseImg: '',
            eysX: 0,
            eysY: 0,
            eysWidth: 0,
            eysHeight: 0
          },
          color: 'rgba(19, 206, 102, 0.8)'  //Tab颜色
        },
        uploadLink: process.env.VUE_APP_BASE_API,
        //预览组件
        openPreview: false,
        direction: 'ttb',
        flag: false,
        x: 0,
        y: 0,
        width: 0,
        height: 0,
        plateName: '',  //点击位置设置时候对应板块的名称
        drawerExam: {}
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!')
        console.log(this.form)
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw)
      },

      //背景图片上传
      screenBackgroundUpload(file, fileList, type) {
        var fd = new FormData()
        fd.append('file', file.raw)
        fd.append('userId', localStorage.getItem('ID'))
        fd.append('last_ip', sessionStorage.getItem('Ip'))
        fd.append('height', this.form.screen.height)
        fd.append('width', this.form.width)

        uploadScreenBackground(fd).then(res => {
          if (res.code == 200) {
            switch (type) {
              case 'fisrst':
                this.form.screen.firstScreenImg = this.form.screen.previewFirImg = res.data.imgPath
                break
              case 'second':
                this.form.screen.secondScreenImg = this.form.screen.previewSecImg = res.data.imgPath
                break
              case 'third':
                this.form.screen.lockScreenImg = res.data.imgPath
                break
            }
            this.bindIcon(this.forres.data.imgPath)
            // console.log('图片', res.data)
          }
        }).catch(function(error) {
          console.log(error)
        })
      },

      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isPNG = file.type === 'image/png'

        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG && !isPNG) {
          this.$message.error('上传头像图片只能是 JPG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isJPG && isLt2M
      },
      //获取图片地址
      bindIcon(icon) {
        //这个地方只是本地临时用的 后续用scr=oss访问地址
        return require('@/assets/images/' + icon)
      },

      //打开预览画布
      showPreview(name = 'previewAll') {
        this.openPreview = !this.openPreview
        this.plateName = name
      },

      drawerHandle(e) {
        var width = this.form.screen.width
        var height = this.form.screen.height
        var that = this
        setTimeout(function() {
          var canvas = document.getElementById('myCanvas')
          canvas.setAttribute('width', width)
          canvas.setAttribute('height', height)
          that.drawRect(canvas, 'organ')
          that.drawRect(canvas, 'school')
          that.drawRect(canvas, 'message')
          that.drawRect(canvas, 'navigation')
          that.drawRect(canvas, 'retButton')
        }, 0)
      },

      //根据鼠标拖动画出对应矩形
      drawRect(canvas, name) {
        var ctx = canvas.getContext('2d')
        ctx.fillStyle = 'rgb(200,0,0)'
        ctx.font = '10px sans-serif'
        var temp = { x: 0, y: 0, width: 0, height: 0, fontColor: '', name: '' }
        switch (name) {
          case 'organ':
            temp = this.form.organ
            break
          case 'school':
            temp = this.form.school
            break
          case 'message':
            temp = this.form.message
            break
          case 'navigation':
            temp = this.form.navigation
            break
          case 'retButton':
            temp = this.form.retButton
            break
          default:
            return
        }
        ctx.fillRect(temp.x, temp.y, temp.width, temp.height)
        var color = temp.fontColor
        if (color == undefined || color == '') color = '#00ff00'
        var halfx = temp.x + temp.width / 2
        var halfy = temp.y + temp.height / 2
        ctx.fillStyle = color
        ctx.fillText(temp.name, halfx, halfy, temp.width / 2)
      },
      mousedown(e) {
        // console.log("鼠标落下");
        this.flag = true
        this.x = e.offsetX // 鼠标落下时的X
        this.y = e.offsetY // 鼠标落下时的Y
      },
      mouseup(e) {
        // console.log("鼠标抬起");
        this.flag = false
        const canvas = this.$refs.myCanvas
        //根据对应板块返回宽高大小和位置
        switch (this.plateName) {
          case '':
            break
          case 'organ':
            this.form.organ.x = this.x
            this.form.organ.y = this.y
            this.form.organ.width = this.width
            this.form.organ.height = this.height
            this.drawRect(canvas, 'organ')
            break
          case 'school':
            this.form.school.x = this.x
            this.form.school.y = this.y
            this.form.school.width = this.width
            this.form.school.height = this.height
            this.drawRect(canvas, 'school')
            break
          case 'message':
            this.form.message.x = this.x
            this.form.message.y = this.y
            this.form.message.width = this.width
            this.form.message.height = this.height
            this.drawRect(canvas, 'message')
            break
          case 'navigation':
            this.form.navigation.x = this.x
            this.form.navigation.y = this.y
            this.form.navigation.width = this.width
            this.form.navigation.height = this.height
            this.drawRect(canvas, 'navigation')
            break
          case 'retButton':
            this.form.retButton.x = this.x
            this.form.retButton.y = this.y
            this.form.retButton.width = this.width
            this.form.retButton.height = this.height
            this.drawRect(canvas, 'retButton')
            break
        }
        //鼠标抬起下次初始位置为0
        this.x = this.y = this.width = this.height = 0
      },
      mousemove(e) {
        // console.log("鼠标移动");
        this.getRectInfo(e)
      },
      getRectInfo(e) {
        if (this.flag == true) {
          const canvas = this.$refs.myCanvas
          var ctx = canvas.getContext('2d')
          let x = this.x
          let y = this.y
          ctx.clearRect(0, 0, canvas.width, canvas.height)
          ctx.beginPath()
          //设置线条颜色，必须放在绘制之前
          // ctx.strokeStyle = '#00ff00'
          ctx.strokeStyle = 'rgb(200,0,0)'
          // 线宽设置，必须放在绘制之前
          ctx.lineWidth = 1
          ctx.strokeRect(x, y, e.offsetX - x, e.offsetY - y)
          this.x = x
          this.y = y
          this.width = e.offsetX - x
          this.height = e.offsetY - y
        }
      }

    },
    mounted() {
    }
  }
</script>

<style scoped>

</style>

<!--布局样式-->
<style>
  .el-header, .el-footer {
    /*background-color: #B3C0D1;*/
    color: #333;
    text-align: center;
    line-height: 60px;
    font-size: 20px;
  }

  .el-aside {
    /*background-color: #D3DCE6;*/
    color: #333;
    /*text-align: center;*/
    /*line-height: 200px;*/
    /*text-align: right;*/
    vertical-align: middle;
    /*font-size: 14px;*/
  }

  .el-main {
    margin: 0;
    padding: 0;
    color: #333;
    /*text-align: center;*/
    /*line-height: 160px;*/
  }

  body > .el-container {
    margin-bottom: 40px;
  }

</style>

<!--首屏背景图样式-->
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }

  .avatar {
    width: 100px;
    height: 100px;
    display: block;
    border-style: none
  }

  .previewButton {
    margin-left: 16px;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 4px;
    position: fixed;
    z-index: 10;
    bottom: 50px;
    right: 100px;
  }

  .previewDrawer {
    /*margin-left: 265px;*/
  }

  canvas {
    border: 1px solid red;
  }

  #myCanvas {
    background-image: url("../../../assets/images/screenBck.png");
  }

  .background-uploader {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    outline: none;
  }

  .backgroudAvatr {
    max-height: 40px;
    object-fit: cover;
    border: 1px solid rgb(204, 204, 204);
    padding: 5px;
  }

</style>

